{% extends 'base.html' %}

{% block header_text %}Your To-Do list{% endblock %}

{% block table %}
  <table id="id_list_table" class="table">
  </table>

  {% if list.owner %}
    <p>List owner: <span id="id_list_owner">{{ list.owner.email }}</span><p>
  {% endif %}
{% endblock %}

{% block extra_content %}
  <div class="row">

    <div class="col-md-6">
      <h3>Shared with</h3>
      <ul>
        {% for sharee in list.shared_with.all %}
          <li class="list-sharee">{{ sharee.email }}</li>
        {% endfor %}
      </ul>
    </div>

    <div class="col-md-3">
      <h3>Share this list:</h3>
      <form class="form-inline" method="POST" action="{% url 'share_list' list.id %}" >
        {% csrf_token %}
        <input name="sharee" placeholder="your-friend@example.com" />
      </form>
        <h3>Shared with</h3>
        <ul>
            {% for sharee in list.shared_with.all %}
              <li class="list-sharee">{{ sharee.email }}</li>
            {% endfor %}
        </ul>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <script>
$(document).ready(function () {
  window.Superlists.initialize({
    listApiUrl: "{% url 'list-detail' list.id %}",
    itemsApiUrl: "{% url 'item-list' %}",
    listId: {{ list.id }},
  });
});
  </script>
{% endblock scripts %}

